<template>
	<view class="home" :style="initContainer()">
		<!-- 		<view class="home_top">
			<u-icon name="arrow-left" color="#ffffff" size="18"></u-icon>
			<span class="home_top_return">返回</span>
		</view> -->
		<view class="home_content">

			<view class="home_content_area">
				<span class=" home_title">县区分布</span>
				<view class="home_content_area_echarts" id="areaEcharts">
					<areaEcharts></areaEcharts>
				</view>
			</view>
			<view class="home_content_area">
				<span class="home_title">总体概况</span>
				<view class="home_title_box">
					<view v-for="item in list" :key="item.key" class="home_title_box_content">
						{{item.value}}<span>人</span>
					</view>
				</view>
				<view class="home_content_area_echarts" id="overViewEcharts">
					<overViewEcharts @definitionEvent="definitionEvent"></overViewEcharts>
				</view>

			</view>
			<view class="home_content_disposal">
				<span class="home_title" style="top: 13%;">预警处置情况</span>
				<view class="home_content_disposal_pieces">
					<disposalHome></disposalHome>
				</view>
			</view>
			<view class="home_content_area">
				<span class="home_title">行为分类</span>
				<view class="home_content_area_echarts" id="behaviorEcharts">
					<behaviorEcharts></behaviorEcharts>
				</view>
			</view>
			<!-- <view>
				<choiceSelect></choiceSelect>
			</view> -->
			<view class="home_content_warn">
				<span class="home_title">告警统计</span>
				<choiceSelect class="home_content_warn_choice" @myEvent="myEvent"></choiceSelect>
				<view class="home_content_warn_echarts" id="warnEcharts">
					<warnEcharts :value=value />
				</view>
			</view>
		</view>
		<!-- 底部tabbar -->
		<tabBar :currentPagePath="this.$route.meta.pagePath"> </tabBar>
	</view>
</template>

<script>
	import * as echarts from 'echarts'
	import {
		mapGetters,
		mapMutations
	}
	from 'vuex';
	export default {
		data() {
			return {
				value: null,
				list: []
			}
		},
		computed: {
			...mapGetters(['JURISDIC_LIST', 'APPROVE_DEPT', 'getParentid'])
		},
		mounted() {
			console.log('JURISDIC_LIST', this.JURISDIC_LIST)
			let parentid = this.getAllIds(this.JURISDIC_LIST[0].children, this.APPROVE_DEPT.id)
			this.setParentid(parentid)
		},
		methods: {
			...mapMutations('user', ['setParentid']),
			// 初始化页面宽高
			initContainer() {
				return `width: ${window.screen.width}px; height: ${window.screen.height}px;`
			},
			myEvent(event) {
				this.value = event
			},
			definitionEvent(event) {
				console.log(event, '自定义事件');
				this.list = event
			},
			getAllIds(items, parentid) {
				let ids = []
				for (let index = 0; index < items.length; index++) {
					if (items[index].id === parentid) {
						ids = []
						// 当找到匹配的 parentId 时，添加当前 item 的 id
						ids.push(items[index].id)
						// 递归收集当前 item 下所有 children 的 id
						if (items[index].children && items[index].children.length > 0) {
							collectChildrenIds(items[index].children)
						}
						return ids
					} else {
						// 当找到匹配的 parentId 时，添加当前 item 的 id
						// ids.push(items[index].id)
						// // 递归收集当前 item 下所有 children 的 id
						// if (items[index].children && items[index].children.length > 0) {
						//   collectChildrenIds(items[index].children)
						// }
					}
				}

				// 辅助函数：递归收集所有 children 的 id
				function collectChildrenIds(children) {
					children.forEach(child => {
						ids.push(child.id) // 添加当前 child 的 id
						if (child.children && child.children.length > 0) {
							// 递归收集子孙的 id
							collectChildrenIds(child.children)
						}
					})
				}
				return ids
			},
		},
		components: {
			areaEcharts: () => import('@/components/echarts/areaEcharts.vue'),
			overViewEcharts: () => import('@/components/echarts/overViewEcharts.vue'),
			disposalHome: () => import('@/components/home/disposalHome.vue'),
			behaviorEcharts: () => import('@/components/echarts/behaviorEcharts.vue'),
			warnEcharts: () => import('@/components/echarts/warnEcharts.vue'),
			choiceSelect: () => import('@/components/home/choiceSelected.vue'),
		},
	}
</script>

<style lang="scss" scoped>
	.home {
		display: flex;
		justify-content: start;
		align-items: center;
		flex-direction: column;
		// overflow: auto;
		background: #F5F5F5;
		// background: #F5F5F5;
		background-image: url('../../static/images/home/组 5.png');
		background-size: contain;
		background-repeat: no-repeat;
		overflow: auto;

		.home_top {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-self: start;
			padding-left: 3%;
			padding-top: 12%;
			height: 5%;
			border: 1px #1F1F1F;

			.home_top_return {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 16px;
				color: #FFFFFF;
			}
		}

		.home_title {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #1F1F1F;
			// margin-top: 10rpx;
			padding: 3%;
			display: block;
			// // padding: 1%;
			// position: relative;
			// top: 5%;
			// left: 8%;
		}

		.home_content {
			display: flex;
			justify-content: start;
			align-items: center;
			flex-direction: column;
			width: 100%;
			height: 93%;
			overflow: auto;

			.home_content_area {
				min-height: 17rem;
				height: 33%;
				width: 92%;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin-top: 3%;
				position: relative;

				.home_title_box {
					display: flex;
					position: absolute;
					justify-content: space-around;
					width: 60%;
					top: 85%;
					left: 20%;

					.home_title_box_content {
						font-family: Myriad Pro;
						font-weight: 600;
						font-size: 18px;
						color: #1F1F1F;
					}
				}

				.home_content_area_echarts {
					height: 80%;
					width: 100%;
					position: relative;
					top: 0%;
				}
			}

			.home_content_disposal {
				min-height: 6rem;
				height: 15%;
				width: 92%;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin-top: 3%;

				.home_content_disposal_pieces {
					height: 35%;
					width: 100%;
				}
			}

			.home_content_warn {
				min-height: 14rem;
				height: 26%;
				width: 92%;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin-top: 3%;
				margin-bottom: 5%;

				.home_content_warn_choice {
					left: 80%;
					position: relative;
					height: 5%;
					width: 20%;
					z-index: 9999;
					top: -12%;
				}

				.home_content_warn_echarts {
					height: 90%;
					width: 100%;
					position: relative;
					bottom: 19%;
				}
			}
		}
	}
</style>